<template>
  <div class="tarbar">
    <div
      class="tarbar-item"
      v-for="(item, index) in tarbar"
      :key="index"
      @click="toPage(item, index)"
    >
      <div class="block">
        <div class="block-img">
          <img
            class="img"
            :src="active != index ? require('@/assets/imgs/tab-icon-'+(index+1)+'.png') : require('@/assets/imgs/tab-icon-'+(index+1)+'-active.png')"
            alt
            v-if="index!=2"
          >
          <div class="center-img" v-else>
            <img class="c-img" :src="require('@/assets/imgs/tab-icon-3.png')" alt>
          </div>
        </div>
        <div class="block-text" :style="{color: active == index ? '#e8443d' : ''}">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  props: ["active"],
  data() {
    return {
      tarbar: [
        {
          text: "HOME",
          routerName: "index"
        },
        {
          text: "影像",
          routerName: "imageIndex"
        },
        {
          text: "新增",
          routerName: "addtoIndex"
        },
        {
          text: "成长",
          routerName: "growupIndex"
        },
        {
          text: "发现",
          routerName: "discoverIndex"
        }
      ]
    };
  },
  methods: {
    toPage(item, index) {
      Toast(item.text)
      return
      if (this.active === index) return;

      // if (index === 2) {
      //   console.log("add");
      //   return;
      // }
      this.$router.replace({
        name: item.routerName
      });
    }
  }
};
</script>

<style scope>
.tarbar {
  width: 100%;
  height: 50px;
  border-top: 0.5px solid #f8f8f8;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  background: #fff;
  z-index: 9999;
}
.tarbar-item {
  width: 40px;
  height: 50px;
  padding: 5px 0;
  box-sizing: border-box;
  /* background: lightblue; */
}
.block {
  width: 100%;
  height: 40px;
}
.block-img {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  position: relative;
}
.img {
  width: 100%;
  height: 100%;
}
.center-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 0.5px solid #f8f8f8;
  background: #fff;
  position: absolute;
  left: -12px;
  top: -24px;
  background: fff;
  padding: 3px;
  box-sizing: border-box;
}
.c-img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.block-text {
  width: 100%;
  height: 20px;
  line-height: 24px;
  font-size: 12px;
  text-align: center;
  color: #4b4848;
}
</style>
